<template>
	<view>
		<!-- 侧边搜索 -->
		<uni-drawer ref="filter" mode='right' :width="300">
			<view class="right-filter">
				<view class="title font32">筛选</view>
				<view class="cont">
					<view class="filter-item">
						<view class="lable font28">项目状态</view>
						<view class="info">
							<picker @change="bindPickerChange" :value="index" :range="approveOption">
								<view class="uni-input font26">{{approveOption[index]}}</view>
								<uni-icons :color="themeBgColor" class="arrow icon-arrow" type="xiala" size="13" />
							</picker>
						</view>
					</view>
					<view class="filter-item">
						<view class="lable font28">项目类型</view>
						<view class="info">
							<picker @change="bindPickerChange" :value="index" :range="approveOption">
								<view class="uni-input font26">{{approveOption[index]}}</view>
								<uni-icons :color="themeBgColor" class="arrow icon-arrow" type="xiala" size="13" />
							</picker>
						</view>
					</view>
					<view class="filter-item">
						<view class="lable font28">项目年份</view>
						<view class="info">
							<picker @change="bindPickerChange" :value="index" :range="approveOption">
								<view class="uni-input font26">{{approveOption[index]}}</view>
								<uni-icons :color="themeBgColor" class="arrow icon-arrow" type="xiala" size="13" />
							</picker>
						</view>
					</view>
					<view class="filter-item">
						<view class="lable font28">项目地址</view>
						<view class="info">
							<picker @change="bindPickerChange" :value="index" :range="approveOption">
								<view class="uni-input font26">{{approveOption[index]}}</view>
								<uni-icons :color="themeBgColor" class="arrow icon-arrow" type="xiala" size="13" />
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-btns uni-flex uni-flex-space-between">
				<button type="default" class="btn cancel font28" @tap="filterHandleClose">取消</button>
				<button type="default" class="btn submit font28">确定</button>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				title: 'picker',
				approveOption: ['全部', '未审批', '已审批'],
				index: 0,
			}
		},
		components: {
			uniDrawer,
			uniIcons,
		},
		computed: {
			...mapGetters(['themeBgColor'])
		},
		methods: {
			// 筛选展开
			filterHandleOpen() {
				this.$refs.filter.open()
			},
			// 筛选关闭
			filterHandleClose() {
				this.$refs.filter.close()
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.right-filter {
		.title {
			text-align: center;
			padding: 20rpx 0;
			text-align: center;
			border-bottom: 1px solid #ddd;
		}

		.cont {
			padding: 20rpx 50rpx;
			.filter-item{
				margin-bottom: 40rpx;
				.lable{
					color:$text-color-blue;
					margin-bottom: 15rpx;
				}
				.info{
					position: relative;
					.uni-input{
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 10rpx;
						background-color: $bg-color-lightgray;
						padding:0rpx 30rpx;
					}
					.arrow{
						position: absolute;
						right:30rpx;
						top:15rpx;
					}
				}
			}
		}
	}

	.footer-btns {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;

		.btn {
			display: inline-block;
			width: 50%;
			line-height: 80rpx;
			height: 80rpx;
			border-radius: 0;
			color: #fff;

			&::after {
				border: none;
			}

			&.cancel {
				background: $bg-color-lightblue;
				color: $text-color-blue;
			}

			&.submit {
				background: $bg-color-blue;
			}
		}
	}
</style>
